<html>
<head>
<title>WECS-WRKB</title>
<link href="/InformationSystem/css/styleHeader.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="/InformationSystem/js/jquery.js"></script>
<script type="text/javascript"
	src="/InformationSystem/js/jqueryslidemenu.js"></script>
<script type="text/javascript"
	src="../ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.4.0/ext-all.js"></script>

<link rel="stylesheet" type="text/css"
	href="../ext-3.4.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="../ext-3.4.0/examples/shared/examples.css" />

<link rel="stylesheet" type="text/css" href="../css/layerbrowser.css" />
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>


<script src="../OpenLayers/lib/OpenLayers.js"></script>

<script type="text/javascript" src="../GeoExt/script/GeoExt.js"></script>



<style>
.olLayerGooglePoweredBy {
	display: none;
}

#header {
	background: url(/InformationSystem/images/bgheader.png) repeat-x;
	z-index: 1001;
	position: relative;
	height: 80px;
}

.delete {
	background: transparent
		url(/InformationSystem/GeoExt/resources/images/default/delete.png);
}

<!--
CSS goes in the document HEAD or added to your external stylesheet -->table.gridtable
	{
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}

table.gridtable th {
	border-width: 1px;
	padding: 5px;
	color: black;
	font-weight: bold;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table.gridtable td {
	border-width: 1px;
	padding: 5px;
	color: black;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
</style>

<script type="text/javascript">
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
var tree, mapPanel,infoControls, controls=[],highlightLayer,selectControl;
var singleLayer;
var infoControlsArray = new Array();
var googleControlsArray = new Array();
var singleLayerArray = new Array();
var singleLayerArrayNepal = new Array();
var highlightLayerArray = new Array();
var map;
Ext.onReady(function() {
	
			var WGS84 = new OpenLayers.Projection("EPSG:4326");
			var WGS84_Google = new OpenLayers.Projection("EPSG:900913");
			var bounds = new OpenLayers.Bounds( 8912255.147174358, 3042338.429770187,
                    9818853.507110078, 3561334.793585392);
			var root = new Ext.tree.AsyncTreeNode(
					{
						text : 'Information System',
						
						expanded: true,
						loader : new GeoExt.tree.WMSCapabilitiesLoader(
								{
									url : 'http://localhost:7070/InformationSystem/home/getCapabilities',
									layerOptions : {
										buffer : 0,
										singleTile : true,
										ratio : 1
									},
									expanded: true,
									layerParams : {
										'TRANSPARENT' : 'TRUE',
										'VISIBILITY' : 'TRUE'
									},
									createNode : function(attr) {
										attr.checked = attr.leaf ? false
												: undefined;
												
										return GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode
												.apply(this, [ attr ]);
									},
									processResponse : function(response, node, callback, scope){
										var capabilities = new OpenLayers.Format.WMSCapabilities().read(
											response.responseXML || response.responseText);
										capabilities.capability && this.processLayer(capabilities.capability,
											capabilities.capability.request.getmap.href, node);
										if (typeof callback == "function") {
											callback.apply(scope || node, [node]);
										}
									},
									createWMSLayer: function(layer, url) {										
										if (layer.name) {
											return new OpenLayers.Layer.WMS( layer.name, url,
												OpenLayers.Util.extend({formats: layer.formats[0], 
													layers: layer.name}, this.layerParams),
												OpenLayers.Util.extend({minScale: layer.minScale,
													queryable: layer.queryable, maxScale: layer.maxScale,
													metadata: layer
												}, this.layerOptions));
										} else {
											return null;
										}
									},
									processLayer: function(layer, url, node) {
										Ext.each(layer.nestedLayers, function(el) {
											var n = this.createNode({text: el.title || el.name, 
												// use nodeType 'node' so no AsyncTreeNodes are created
												nodeType: 'node',
												layer: this.createWMSLayer(el, url),
												leaf: (el.nestedLayers.length === 0)});
											if(n){
												node.appendChild(n);
											}
											if (el.nestedLayers) {
												this.processLayer(el, url, n);
											}
										}, this);
									}									
								})
					});
			

			tree = new Ext.tree.TreePanel({
				root : root,
				region : 'north',
				title : 'Layers',
				
				split : true,
				height : 360,
				minSize : 150,
				autoScroll : true,
				nodeType : "gx_layer",
				listeners : {
					// Add layers to the map when ckecked, remove when
					// unchecked.
					// Note that this does not take care of maintaining the
					// layer
					// order on the map.
					'checkchange' : function(node, checked) {
					 updateDetailsPanel(node,checked);
					  if (checked === true) {
					
					   var params = {displayInLayerSwitcher: false};
					   var options = {
						transparent: 'TRUE',
						//srs: 'EPSG:4326',
						layers: node.attributes.layer.name,
						format: 'image/png',
						isBaseLayer: false,
						visibility: true
					   };
					   singleLayer= new OpenLayers.Layer.WMS(
						node.attributes.layer.name, "http://localhost:8080/geoserver/wms",
						options, params
					   );
					   
					var highlight_style = { fillColor:'#7D26CD', strokeColor:'#FF0000',strokeWidth:3, fillOpacity:0.6 };
						
						 highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
						 displayInLayerSwitcher: false,
						 isBaseLayer: false,
						 style:highlight_style
						});
						
						var infoControls = getInfoControls(singleLayer,mapPanel);
				
						mapPanel.map.addLayers([singleLayer,highlightLayer]);
						singleLayerArrayNepal[node.attributes.layer.name]=singleLayer;
						highlightLayerArray[node.attributes.layer.name]=highlightLayer;
						infoControlsArray[node.attributes.layer.name]=infoControls;
				
						 registerEventInMapPanel(infoControls);
						
						 } else {      
						
						 mapPanel.map.removeLayer(singleLayerArrayNepal[node.attributes.layer.name]);
						 removeEventInMapPanel(infoControlsArray[node.attributes.layer.name]);
					
						mapPanel.map.removeLayer(highlightLayerArray[node.attributes.layer.name]);
					  }
					}
				}
			});
			map = new OpenLayers.Map('map',{
					 maxExtent: bounds,
                    maxResolution: 'auto',
					maxResolution: 'auto',
                    projection: "EPSG:900913",
                    units: 'm',
					eventListeners: {
						'changebaselayer': mapBaseLayerChanged
					}
			});
					
			
			  function mapBaseLayerChanged(event){
				var layers = new Array();
				var toAddLayers = new Array();
				
				
				var index=0;
				
				
				map.zoomToExtent(bounds);
				for(var i in map.layers){
				if(singleLayerArrayNepal[map.layers[i].name] != undefined){
				toAddLayers[index]=singleLayerArrayNepal[map.layers[i].name];
				//highLightArray[index]=highlightLayer;
				layers[index]=map.layers[i];
				index=index+1;
				}
	
		}
    
			if(index>0){
			for(var i=0;i<index;i++){
					map.removeLayer(layers[i]);
				}
			for(var i=0;i<index;i++){
					map.addLayer(toAddLayers[i]);
				}
			}
			
			}
			var nepalBase = new OpenLayers.Layer.WMS(
                    "NepalWindow", "http://localhost:8080/geoserver/wecs/wms",
                    {
                        LAYERS: 'wecs:NepalWindows',
                        STYLES: '',
                        format: 'image/png',
                        tiled: true,
                       
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: true,
                        yx : {'EPSG:900913' : false}
                    } 
                );
			var nepalOverLay = new OpenLayers.Layer.WMS(
                    "NepalOverLay", "http://localhost:8080/geoserver/wecs/wms",
                    {
                        LAYERS: 'wecs:NepalWindows',
						transparent:true,
                        STYLES: '',
                        format: 'image/png',
                        tiled: true,
                      
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
						isBaseLayer: false,
                        yx : {'EPSG:900913' : false}
                    } 
                );
		var gphy = new OpenLayers.Layer.Google(
				"Google Physical",
				{ 	 type: google.maps.MapTypeId.TERRAIN,
					'sphericalMercator': true,
					'maxExtent': bounds
				}
			);
			var gmap = new OpenLayers.Layer.Google(
				"Google Streets", // the default
				{'sphericalMercator': true,
					'maxExtent': bounds}
			);
			var ghyb = new OpenLayers.Layer.Google(
				"Google Hybrid",
			{type: google.maps.MapTypeId.HYBRID,
			'sphericalMercator': true,
					'maxExtent': bounds}
			);
			var gsat = new OpenLayers.Layer.Google(
				"Google Satellite",
				{type: google.maps.MapTypeId.SATELLITE,
				'sphericalMercator': true,
					'maxExtent': bounds}
			);
			
			mapPanel = new GeoExt.MapPanel({
				id : 'content-panel',
				region : 'center',
				zoom : 2,
				center: new OpenLayers.LonLat(85.0,29.0),
				map : map,
				//layers : [nepalBase,nepalOverLay],
				layers : [gphy,gmap,ghyb,gsat,nepalBase,nepalOverLay],
				bbar: [{
				text: "Print...",
				handler: function() {
					window.print();
					}}]				
				});
			

			var detailsPanel= {
			    id:'detailsPanel',
				title : 'WorkSpace',
				region : 'center',
				bodyStyle : 'padding-bottom:15px;background:#eee;',
				autoScroll : true
				
			};
			
			new Ext.Viewport({
				layout : 'border',
				title : 'Information System',
				items : [ {
					xtype : 'box',
					id : 'header',
					region : 'north',
					html : '<div id="header"><div class="wrapper"><div id="logo" class="col_14"><a href="#"><img src="/InformationSystem/images/logo.png" alt="" /></a></div><div id="menu" class="col_34 last"><div id="myslidemenu" class="jqueryslidemenu"><ul><li class="selected"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Information Center</a></li><li><a href="#">Contact</a></li></ul></div></div></div></div>',
					height : 80
				}, {
					layout : 'border',
					id : 'layout-browser',
					region : 'west',
					border : false,
					split : true,
					margins : '2 0 5 5',
					width : 275,
					minSize : 100,
					maxSize : 500,
					items : [ tree, detailsPanel],
					collapsible : true
				}, mapPanel ],
				renderTo : Ext.getBody()
			});
			/*selectControl = new OpenLayers.Control.SelectFeature(
                [singleLayer],
                {
                    clickout: true, toggle: false,
                    multiple: false, hover: false,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey" // shift key adds to selection
                }
            );
           function errorHTML(response)
			{
				alert("req erro:" + response.responseText);
			}
			mapPanel.map.addControl(selectControl);
            selectControl.activate();
		
			mapPanel.map.addControl(new OpenLayers.Control.MousePosition({
				element : $('location')
			}));*/
			mapPanel.map.addControl(new OpenLayers.Control.Navigation());
			mapPanel.map.addControl(new OpenLayers.Control.Scale($('scale')));
			mapPanel.map.addControl(new OpenLayers.Control.LayerSwitcher());
			mapPanel.map.zoomToExtent(bounds);
			mapPanel.map.updateSize();
		});
	
	function getInfoControls(currentLayer,mapPanel){

	var infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [currentLayer],
                queryVisible: true,
				infoFormat:'application/vnd.ogc.gml',
				eventListeners: {
				
					getfeatureinfo: function(event) {
				//	alert(mapPanel.map.getLonLatFromPixel(event.xy));
						if (event.text.indexOf("<table class=\"featureInfo\">") != -1){
							mapPanel.map.addPopup(new OpenLayers.Popup.FramedCloud(
									"chicken",
									mapPanel.map.getLonLatFromPixel(event.xy),
									null,
									GenPopText(event),
									null,
									true,
									closePopUp
									
								));
						}
					}
				}
				
				
           	})
			};
	
	return infoControls;
}

function registerEventInMapPanel(infoControls){
	for ( var i in infoControls) {
			infoControls[i].events.register("getfeatureinfo", this,	showInfo);
			mapPanel.map.addControl(infoControls[i]);
	}
	
	infoControls.click.activate();
	
}

function removeEventInMapPanel(infoControls){
	for(var i in infoControls){
		infoControls.click.deactivate();
	}
}

function GenPopText(evt) {
	var temstr ="";
	//alert(evt.features.length);
	if(evt.features.length>0){
		temstr= '<div style="color: skyBlue; text-align: center; font-size: 15px; padding: 8px; font-weight: bold;">' + evt.features[0].gml.featureType + '</div>';
		temstr +='<div><table class="gridtable">';
		for ( var key in evt.features[0].attributes) {
		    
			temstr += '<tr><th>' + key + '</th><td>'+evt.features[0].attributes[key]+'</td></tr>';
		}
		temstr+='</table></div>';
		
	
	}
			return temstr;
}

function closePopUp(){
	this.hide();
	
	highlightLayer.destroyFeatures();
}
function showInfo(evt) {
	if (evt.features && evt.features.length) {
		highlightLayer.destroyFeatures();
		highlightLayer.addFeatures(evt.features);
		highlightLayer.redraw();
	} else {
		highlightLayer.destroyFeatures();
	}
}

function updateDetailsPanel(node,checked){
    var nodeName = node.attributes.layer.name;
	 var layer= nodeName.split(':');


    var detailsPanel = Ext.getCmp("detailsPanel");
    var nodeLayerPanel;
    if( checked === true ){
     
      var X_button = new Ext.Button({
      iconCls: 'delete',
      handler: function(){
       node.getUI().toggleCheck(false);
       }
      });
	 
     var htmlPanel=new Ext.Panel({
      width: 220,
      html:'<b style="color: black;">'+layer[1]+'</b>',
      bodyStyle: 'background:#dddddd;border: none;'
     });
     
     nodeLayerPanel = new Ext.Panel({
      id: nodeName,
      bodyStyle: 'background:#dddddd;padding-top:6px;padding-left:6px;height:24px;',
      layout: {
       align: 'stretch',
       type: 'hbox'
      },
      items: [
       htmlPanel,X_button
      ]
     });
     
     detailsPanel.add(nodeLayerPanel);
     detailsPanel.doLayout();
    }
    else{
     nodeLayerPanel = Ext.getCmp(nodeName);
     nodeLayerPanel.destroy();
    }
  }
</script>
</head>
<body>

	<div>
		<div id="start-div">
			<div style="float: left;">
				
			</div>
			<div style="margin-left: 100px;"></div>
		</div>
	</div>
</body>
</html>